<template>
  <div style="height: 100%; max-width: 700px; margin: auto">
    <!--总-->
    <el-container
      ><!--容器-->
      <el-header class="header"
        ><h3>教&nbsp;师&nbsp;注&nbsp;册&nbsp;表&nbsp;单</h3></el-header
      ><!--容器的头部分，标题-->

      <el-main class="main"
        ><!--容器的主题部分-->
        <el-form ref="form" :model="form" label-width="80px" size="mini">
          <el-form-item label="教师姓名:"
            ><!--姓名-->
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="教师工号:"
            ><!--工号-->
            <el-input v-model="form.jobno" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="联系方式:"
            ><!--联系方式-->
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="所属学院:"
            ><!--学院-->
            <el-select
              v-model="form.college"
              placeholder="请选择学院"
              style="width: 100%"
            >
              <el-option
                label="计算机工程学院"
                value="计算机工程学院"
              ></el-option>
              <el-option
                label="大数据工程学院"
                value="大数据工程学院"
              ></el-option>
              <el-option
                label="电子信息工程学院"
                value="电子信息工程学院"
              ></el-option>
              <el-option label="电气工程学院" value="电气工程学院"></el-option>
              <el-option label="通信工程学院" value="通信工程学院"></el-option>
              <el-option
                label="汽车与交通工程学院"
                value="汽车与交通工程学院"
              ></el-option>
              <el-option label="土木工程学院" value="土木工程学院"></el-option>
              <el-option label="机械工程学院" value="机械工程学院"></el-option>
              <el-option
                label="机器人工程学院"
                value="机器人工程学院"
              ></el-option>
              <el-option label="建筑学院" value="建筑学院"></el-option>
              <el-option label="珠宝学院" value="珠宝学院"></el-option>
              <el-option label="管理学院" value="管理学院"></el-option>
              <el-option label="外国语学院" value="外国语学院"></el-option>
              <el-option label="国际商学院" value="国际商学院"></el-option>
              <el-option label="经济学院" value="经济学院"></el-option>
              <el-option
                label="创新创业教育学院"
                value="创新创业教育学院"
              ></el-option>
              <el-option
                label="马克思主义学院"
                value="马克思主义学院"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="教师签名:"
            ><!--签名提示-->
            <span class="span1">*&nbsp;请老师通过手机端在下面画板签名</span>
          </el-form-item>

          <div>
            <!--画板-->
            <vue-esign
              ref="esign"
              :width="800"
              :height="400"
              :isCrop="isCrop"
              :lineWidth="lineWidth"
              :lineColor="lineColor"
              :bgColor.sync="bgColor"
              class="esign"
            />
          </div>

          <div style="margin-top: 10px; height: 50px">
            <!--两个按钮-->
            <el-button
              type="success"
              size="small"
              @click="handleGenerate()"
              style="float: right"
              >确认提交</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="handleReset()"
              style="float: right; margin-right: 10px"
              >重写签名</el-button
            >
          </div>

          <div class="F-Bottom">
            <!--提示-->
            <p>--广州城市理工学院计算机实验中心 &nbsp;&copy;软件创新实验室--</p>
          </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { axios1 } from "@/network/index.js"; //请求模块

export default {
  data() {
    return {
      form: {
        name: "",
        jobno: "",
        phone: "",
        college: "",
        resultImg: "",
      },
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      isCrop: true,
      submit: 1, //提交次数
    };
  },

  methods: {
    handleReset() {
      //重写签名
      this.$refs.esign.reset();
    },

    handleGenerate() {
      //提交信息
      this.$refs.esign
        .generate()
        .then((res) => {
          this.form.resultImg = res;
          if (this.submit > 0) {
            if (
              this.form.name == "" ||
              this.form.jobno == "" ||
              this.form.phone == "" ||
              this.form.college == "" ||
              this.form.cardnumber == ""
            ) {
              alert("信息项不可以为空");
            } else {
              axios1({
                //发送教师注册请求
                url: "/register",
                method: "post", //get请求，参数是params。post请求，参数是data
                headers: { "Content-Type": "multipart/form-data" },
                data: {
                  file: this.base64toFile(this.form.resultImg), //图片

                  tid: this.form.jobno, //工号
                  tname: this.form.name, //姓名
                  ttelephone: this.form.phone, //手机
                  tinstitude: this.form.college, //学院
                },
              })
                .then((res) => {
                  if (res.data.resultCode == "200") {
                    alert(res.data.msg);
                    this.$router.push("/regfrom2");
                  } else {
                    alert(res.data.msg);
                  }

                  // console.log(this.form),
                  // console.log(res)
                })
                .catch((res) => {
                  alert("发送请求失败！！" + res);
                });
              this.submit--;
            }
          } else {
            alert("您已经提交过了!请刷新！！");
          }
        })
        .catch((err) => {
          alert("画板不可以为空");
        });
      /**.catch(err => {
                 alert("画板不可以为空") 
             }) */
    },

    base64toFile(dataBase64, filename = "file") {
      let arr = dataBase64.split(",");
      let mime = arr[0].match(/:(.*?);/)[1]; //设置file⽂件流的type名称
      let suffix = mime.split("/")[1]; //设置file⽂件流的name名称
      const bstr = window.atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },
  },
};
</script>

<style scoped>
.header {
  background-color: rgb(118, 172, 243);
  text-align: center;
  font-size: 16px;
  color: #4c4c4d;
  border-bottom: 1px solid rgb(146, 146, 146);
}
.main {
  height: 50%;

  margin-top: 10px;
}

.esign {
  border-radius: 4px;
  border: 2px solid #dcdfe6;
}
.span1 {
  color: #f56c6c;
  font-size: 4px;
  font-weight: 500;
}
.F-Bottom {
  text-align: center;
  font-size: 10px;
  margin-top: 30px;
  font-weight: 600;
  color: #444444;
  border-bottom: 1px solid rgb(118, 172, 243);
}
</style>
